﻿<div ng-if="activeTab == 'style'" ng-controller="StyleConsoleCtrl">
    <div class="yangshi">
        <section>
            <div class="style_list" ng-init="showBasic=true" ng-click="showBasic = !showBasic; showBorder = false; showShadow = false;">
                <b class="caret" ng-show="showBasic">
                </b>
                <b class="caret off" ng-show="!showBasic">
                </b>
                基础样式
            </div>
            <div ng-show="showBasic" class="style_con_hei">
                <div class="style_list_angel clearfix">
                    <label>
                        背景颜色
                    </label>
                    <div class="color_select clearfix">
                        <a class="input_kuang flo_lef" ng-style="{backgroundColor: model.backgroundColor}"
                           ng-model="model.backgroundColor" colorpicker="rgba">
                        </a>
                        <input class="flo_right input-color" style-input elem-id="{{elemDef.id}}"
                               ng-model="model.backgroundColor" css-item="backgroundColor" type="text" />
                    </div>
                </div>
                <div class="style_list_angel clearfix" ng-show="elemDef.type == '2' ||elemDef.type == '8' || (''+elemDef.type).charAt(0) == '6' || elemDef.type == 'r' || elemDef.type == 'h' || elemDef.type == 'i' || elemDef.type == 'c' || elemDef.type == 'x' || elemDef.type == 'y'">
                    <label>
                        内容颜色
                    </label>
                    <div class="color_select clearfix">
                        <a class="input_kuang flo_lef" ng-style="{backgroundColor: model.color}"
                           ng-model="model.color" colorpicker="rgba">
                        </a>
                        <input class="flo_right input-color" style-input elem-id="{{elemDef.id}}"
                               ng-model="model.color" css-item="color" type="text" />
                    </div>
                </div>
                <div class="style_list_angel clearfix">
                    <label>
                        透明度
                    </label>
                    <div class="touming clearfix">
                        <p class="num">
                            <input class="short" type="number" min="0" max="100" limit-input style-input
                                   elem-id="{{elemDef.id}}" css-item="opacity" ng-model="model.opacity" />
                            %
                        </p>
                        <div style="width: 100px;" ui-slider min="0" max="100" ng-model="model.opacity">
                        </div>
                    </div>
                </div>
                <div class="style_list_angel clearfix" ng-show="elemDef.type == '8' || (''+elemDef.type).charAt(0) == '6' || elemDef.type == '2' || (''+elemDef.type).charAt(0) == '5' || elemDef.type == 'r' || elemDef.type == 'c' || elemDef.type == 'x' || elemDef.type == 'y'">
                    <div>
                        <label>
                            边距
                        </label>
                        <div class="touming clearfix">
                            <p class="num">
                                <input class="short" min="0" limit-input class="input_kuang short" type="number"
                                       style-input css-item="padding" ng-model="model.paddingTop" />
                                px
                            </p>
                            <div style="width: 100px;" ui-slider min="0" max="20" ng-model="model.paddingTop">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="style_list_angel clearfix" ng-show="elemDef.type == '8' || (''+elemDef.type).charAt(0) == '6' || elemDef.type == '2' || (''+elemDef.type).charAt(0) == '5' || elemDef.type == 'r' || elemDef.type == 'c' || elemDef.type == 'x' || elemDef.type == 'y'">
                    <div>
                        <label>
                            行高
                        </label>
                        <div class="touming clearfix">
                            <p class="num">
                                <input class="short" min="0" max="3" limit-input step="0.1" class="input_kuang short"
                                       type="number" style-input css-item="lineHeight" ng-model="model.lineHeight" />
                                倍
                            </p>
                            <div style="width: 100px;" use-decimals step="0.1" ui-slider min="0" max="3"
                                 ng-model="model.lineHeight">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <div class="style_list" ng-click="showBorder = !showBorder; showBasic=false;showShadow=false;">
                <b class="caret" ng-show="showBorder">
                </b>
                <b class="caret off" ng-show="!showBorder">
                </b>
                边框样式
            </div>
            <div ng-show="showBorder" class="style_con_hei">
                <div class="style_list_angel clearfix">
                    <label>
                        边框尺寸
                    </label>
                    <div class="touming clearfix">
                        <p class="num">
                            <input class="input_kuang short" limit-input type="number" min="0" max="20"
                                   style-input css-item="borderWidth" ng-model="model.borderWidth" />
                            px
                        </p>
                        <div style="width: 100px;" ui-slider min="0" max="20" ng-model="model.borderWidth">
                        </div>
                    </div>
                </div>
                <div class="style_list_angel clearfix">
                    <label>
                        边框弧度
                    </label>
                    <div class="touming clearfix">
                        <p class="num">
                            <input class="input_kuang short" type="number" min="0" max="{{maxRadius}}"
                                   limit-input style-input css-item="borderRadius" ng-model="model.borderRadius" />
                            px
                        </p>
                        <div class="num" style="width:100px;" ui-slider min="0" max="{{maxRadius}}"
                             ng-model="model.borderRadius">
                        </div>
                    </div>
                </div>
                <div class="style_list_angel clearfix">
                    <label>
                        边框样式
                    </label>
                    <div class="touming">
                        <select style-input css-item="borderStyle" ng-model="model.borderStyle">
                            <option value="solid">
                                直线
                            </option>
                            <option value="dashed">
                                破折线
                            </option>
                            <option value="dotted">
                                点状线
                            </option>
                            <option value="double">
                                双划线
                            </option>
                            <option value="groove">
                                3D凹槽
                            </option>
                            <option value="ridge">
                                3D垄状
                            </option>
                            <option value="inset">
                                3D内嵌
                            </option>
                            <option value="outset">
                                3D外嵌
                            </option>
                        </select>
                    </div>
                </div>
                <div class="style_list_angel clearfix">
                    <label>
                        边框颜色
                    </label>
                    <div class="color_select clearfix">
                        <input class="flo_right input-color" style-input ng-model="model.borderColor"
                               css-item="borderColor" type="text" />
                        <a class="input_kuang flo_lef" ng-style="{backgroundColor: model.borderColor}"
                           ng-model="model.borderColor" colorpicker="rgba">
                        </a>
                    </div>
                </div>
                <div class="style_list_angel clearfix">
                    <div>
                        <label>
                            旋转
                        </label>
                        <div class="touming clearfix">
                            <p class="num">
                                <input min="0" max="360" limit-input style-input css-item="transform"
                                       class="input_kuang short" type="number" ng-model="model.transform" />
                                度
                            </p>
                            <div style="width: 100px;" ui-slider min="0" max="360" ng-model="model.transform">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <div class="style_list" ng-click="showShadow = !showShadow; showBasic=false;showBorder=false;">
                <b class="caret" ng-show="showShadow">
                </b>
                <b class="caret off" ng-show="!showShadow">
                </b>
                阴影样式
            </div>
            <div ng-show="showShadow" class="style_con_hei">
                <div class="style_list_angel clearfix">
                    <label>
                        大小
                    </label>
                    <div class="touming clearfix">
                        <div style="width: 100px;" ui-slider min="0" max="20" ng-model="tmpModel.boxShadowSize">
                        </div>
                        <p class="num">
                            <input limit-input class="input_kuang short" min="0" max="20" type="number"
                                   style-input css-item="boxShadow" ng-model="tmpModel.boxShadowSize" />
                            px
                        </p>
                    </div>
                </div>
                <div class="style_list_angel clearfix">
                    <label>
                        模糊
                    </label>
                    <div class="touming clearfix">
                        <div style="width: 100px;" ui-slider min="0" max="20" ng-model="tmpModel.boxShadowBlur">
                        </div>
                        <p class="num">
                            <input limit-input class="input_kuang short" min="0" max="20" type="number"
                                   style-input css-item="boxShadow" ng-model="tmpModel.boxShadowBlur" />
                            px
                        </p>
                    </div>
                </div>
                <div class="style_list_angel clearfix">
                    <label>
                        颜色
                    </label>
                    <div class="clearfix color_select">
                        <input class=" flo_right short" style="width:115px;" style-input ng-model="tmpModel.boxShadowColor"
                               css-item="boxShadow" type="text" />
                        <a class="input_kuang flo_lef" ng-style="{backgroundColor: tmpModel.boxShadowColor}"
                           ng-model="tmpModel.boxShadowColor" colorpicker="rgba" colorpicker-fixed-position="true">
                        </a>
                    </div>
                </div>
                <div class="style_list_angel clearfix">
                    <label>
                        方向
                    </label>
                    <div class="clearfix">
                        <div class="fr">
                            <p class="num" style="margin-top:18px;">
                                <input style="width:58px;margin-right:5px;padding:0;" min="0" max="359"
                                       limit-input class="input_kuang" type="number" style-input css-item="boxShadow"
                                       ng-model="tmpModel.boxShadowDirection" />
                                度
                            </p>
                        </div>
                        <angle-knob class="flo_lef" style="display: block;position: relative;height: 55px;margin-left:28px;margin-top:5px;">
                        </angle-knob>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div class="modal-footer">
        <a class="btn-main" ng-click="cancel()">
            确定
        </a>
        <a class="btn-grey0" ng-click="clear()">
            清除样式
        </a>
    </div>
</div>